<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-size: 20px;">AQI指数趋势统计</span>
                    <el-button class="button" @click="init" text>刷新</el-button>
                </div>
            </template>
            <div class="content">
                <el-table :data="tableData" style="width: calc(90% - 30px);" :row-class-name="tableRowClassName">
                    <el-table-column prop="id" label="AQI趋势编号" />
                    <el-table-column prop="months" label="日期-年月" />
                    <el-table-column prop="nums" label="AQI空气质量指数超标数量" />
                </el-table>
                <div class="echarts-container" id="chart-container"></div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $axios from '../utils/axios'
import * as echarts from 'echarts'

const tableData = ref([])

const init = async () => {
    const path = '/statistics/trend'
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        tableData.value = res.result
    }
    for (let index = 0; index < tableData.value.length; index++) {
        tableData.value[index].id = index + 1;
    }
}

onMounted(() => {
    init().then(() => {
        drawChart();
    });
})

const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : 'normal-row'
}

const drawChart = () => {
    const chartContainer = document.getElementById('chart-container')
    const chart = echarts.init(chartContainer)

    // Random data generation for demonstration
    let base = +new Date(2023, 0, 1);
    let oneDay = 24 * 3600 * 1000;
    let data = [];
    for (let i = 0; i < 365; i++) {
        let now = new Date(base += oneDay);
        data.push([+now, Math.round(Math.random() * 300)]);
    }

    // Chart options
    const options = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: 'AQI指数趋势统计'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'time',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                start: 0,
                end: 100
            }
        ],
        series: [
            {
                name: 'AQI空气质量指数超标数量',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {},
                data: data
            }
        ]
    };

    // Apply options to chart
    chart.setOption(options);
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-card {
    width: 98%;
    height: 95%;
    margin-top: 12px;
    margin-left: 1%;
    border-radius: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.text {
    font-size: 18px;
}

.item {
    margin-top: 20px;
}

.echarts-container {
    display: flex;
    margin-top: 5px;
}

#chart-container {
    width: 100%;
    height: 400px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 12px;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: #87e09a; /* 背景 */
    color: #333; /* 深灰色文本 */
    border: 5px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
    text-align: center; /*表头文字居中  */
}
.el-table .normal-row {
    --el-table-tr-bg-color: #c6f1cf; /* 白色背景 */
    color: #333; /* 深灰色文本 */
    border: 1px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
}
/* 表头样式 */
.el-table th {
    background-color: #434343 !important; /* 表头背景色 */
    color: #ffffff; /* 表头文字颜色 */
    font-size: 15px; /* 表头字体大小 */
    text-align: center!important; /*表头文字居中  */
    padding: 10px; /* 表头内边距 */
}
/* 表格内容样式 */
.el-table td {
    font-size: 15px; /* 表格内容字体大小 */
    color: #333; /* 表格内容文字颜色 */
    text-align: center!important; /* 表格内容文字居中 */
    padding: 10px; /* 表格内容内边距 */
}
/* 鼠标悬停行的样式 */
.el-table .el-table__row:hover {
    background-color: #75a2ec !important; /* 浅蓝色背景 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
</style>
